<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/css/element.css">
    <link rel="stylesheet" href="/editor/css/style.css" />
    <link rel="stylesheet" href="/editor/css/editormd.css" />
    <script src="/editor/js/jquery.min.js"></script>
    <script src="/editor/js/editormd.min.js"></script>
    <script src="/js/vue2.6.js"></script>
    <script src="/js/element.js"></script>
    <script src="/js/axios.js"></script>
    <script src="/js/app.js"></script>
    <title>内容新建</title>
</head>
<body>
<div id="app">
    <div style="background-color: white;padding: 20px;border-radius: 15px">

        <div style="padding: 20px">

            <el-row>
                <el-col :span="19">
                    <el-form :model="form">
                        <el-input placeholder="请输入标题" v-model="form.title">
                            <template slot="prepend">标题</template>
                        </el-input>
                    </el-form>
                </el-col>
                <el-col :span="5">
                    <el-button type="primary" @click="submitFrom()">提交</el-button>
                </el-col>
            </el-row>

            <br>

            <el-row>
                <el-col :span="10">
                    <el-form :model="form">
                        <el-input placeholder="请输入标签" v-model="form.tags">
                            <template slot="prepend">备注</template>
                        </el-input>
                    </el-form>
                </el-col>
            </el-row>

            <br>
            <div id="test-editormd">
                <textarea id="content-main"  style="display:none;">
                </textarea>
            </div>
            <br><br>
        </div>
    </div>
</div>

<script type="text/javascript">
    var testEditor;

    var Main = {
        data() {
            return{
                form:{},
                formLabelWidth:'120px',
                restaurants: [],
                state: '',
                select: '',
            }
        },
        methods: {
            submitFrom(){
                //获取富文本
                var content=$("#content-main").val();
                var data={'title':this.form.title,'content':content,'tag':this.form.tags};
                api.POST('/note/save',data,(result)=>{
                    if (result.code==0){
                        this.$message({
                            showClose: true,
                            message: '添加成功',
                            type: 'success'
                        });
                        window.location.href="/page/update.html?obj="+result.data
                    }
                })
            }
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')

    $(function() {
        testEditor = editormd("test-editormd", {
            width   : "100%",
            height  : 640,
            syncScrolling : "single",
            path    : "/editor/lib/",
            saveHTMLToTextarea : true ,// 保存 HTML 到 Textarea
            htmlDecode: "style,script,iframe",
            imageUpload : true,  //开启图片上传
            imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL : "/upload/uploadFile", //上传的路径，就是mvc的controller路径
        });
    });






</script>
</body>
</html>